<template>
  <div class="set-params" @click="($event) => $event.stopPropagation()">
    <!--  body  -->
    <div class="description">
      <template v-if="selectNode.data.input.length >= 2">
        <div class="prompt-message">请选择列</div>
        <!-- 表名 -->
        <div class="table-name-tips">
          <!-- 左表 -->
          <div class="table-name table-name-left">
            <div class="name-width">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>
                    节点名称：{{ selectNode.data.input[0].nodeName }}
                    <br />
                    表名：{{ selectNode.data.input[0].tableName }}
                  </span>
                </template>
                <span class="name-text">
                  {{ selectNode.data.input[0].nodeName }}
                </span>
              </a-tooltip>
            </div>
          </div>
          <!-- 右表 -->
          <div class="table-name table-name-right">
            <div class="name-width">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>
                    节点名称：{{ selectNode.data.input[1].nodeName }}
                    <br />
                    表名：{{ selectNode.data.input[1].tableName }}
                  </span>
                </template>
                <span class="name-text">
                  {{ selectNode.data.input[1].nodeName }}
                </span>
              </a-tooltip>
            </div>
          </div>
        </div>
        <!--  join   -->
        <div class="incidence-all">
          <!-- 左表  -->
          <div class="incidence-all-left incidence-left-right">
            <div class="incidence-item-column">
              <a-select
                v-model="left"
                class="incidence-column-select"
                size="small"
                @change="onLeftColumnChange"
              >
                <!-- 节点data.input 中是输入表名及字段 [0] 左表 -->
                <a-select-option
                  v-for="(column1, index) in selectNode.data.input[0].tableCols"
                  :key="'column1' + index"
                  :value="column1"
                  >{{ column1 }}</a-select-option
                >
              </a-select>
              <!-- 条件选择 -->
              <a-select v-model="operator" class="operator-select" size="small">
                <a-select-option :value="'='">=</a-select-option>
                <a-select-option :value="'!='">!=</a-select-option>
              </a-select>
            </div>
          </div>
          <!-- 右表  -->
          <div class="incidence-all-right incidence-left-right">
            <div class="incidence-item-column">
              <a-select
                v-model="right"
                class="incidence-column-select"
                size="small"
                @change="onRightColumnChange"
              >
                <!-- 节点data.input 中是输入表名及字段 [1] 右表 -->
                <a-select-option
                  v-for="(column2, index) in selectNode.data.input[1].tableCols"
                  :key="'column2' + index"
                  :value="column2"
                  >{{ column2 }}</a-select-option
                >
              </a-select>
            </div>
          </div>
        </div>
        <div class="column-detail">
          <div class="left">
            <div
              v-for="(item, index) in leftDetail"
              :key="`left-detail-${item}-${index}`"
              class="item"
              :title="item"
            >
              {{ item }}
            </div>
          </div>
          <div class="right">
            <div
              v-for="(item, index) in rightDetail"
              :key="`right-detail-${item}-${index}`"
              class="item"
              :title="item"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </template>
      <div v-else class="set-params-warning">
        -- 该节点需要添加两个父节点 ! --
      </div>
    </div>
    <!--  footer  -->
    <div class="footer-buttons">
      <div class="btn import-btn" @click="confirm">确定</div>
      <div class="btn cancel-btn" @click="cancelChange">取消</div>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
// import {Prop} from 'vue-property-decorator'
import DataViewStore from '@/store/modules/dataview'
import { Watch } from 'vue-property-decorator'
import { cloneDeep } from 'lodash'
import { apiGetTableData } from '@/api/data-clean'

@Component
export default class EtlJoin extends Vue {
  // 模式
  public mod: number = 1
  // 左表列
  public left: string = ''
  // 右表列
  public right: string = ''
  // 条件选择
  public operator: string = '='

  // 左表列详细字段
  private leftDetail: any[] = []
  // 右表列详细字段
  private rightDetail: any[] = []

  private get selectNode() {
    return DataViewStore.selectNode
  }

  // 监听激活的节点
  @Watch('selectNode', { deep: true })
  private changeSelectNode(selectNode: any) {
    if (selectNode) {
      this.initSet()
    }
  }

  public created() {
    // 回显
    this.initSet()
  }

  public async initSet() {
    this.mod = cloneDeep(this.selectNode.data.mod)
    this.left = cloneDeep(this.selectNode.data.left)
    this.right = cloneDeep(this.selectNode.data.right)
    this.operator = cloneDeep(this.selectNode.data.operator)

    this.leftDetail = await this.getColumnDetail({
      name: this.selectNode.data.left,
      taskId: this.selectNode.parentId?.split(',')[0],
      table: this.selectNode.data.input[0].tableName,
    })
    this.rightDetail = await this.getColumnDetail({
      name: this.selectNode.data.right,
      taskId: this.selectNode.parentId?.split(',')[1],
      table: this.selectNode.data.input[1].tableName,
    })
  }

  public confirm() {
    this.$emit('confirm', {
      mod: this.mod,
      left: this.left,
      right: this.right,
      operator: this.operator,
    })
  }

  /**
   * 取消修改
   */
  public cancelChange() {
    this.initSet()
    this.$emit('cancel')
  }

  public async onLeftColumnChange() {
    this.leftDetail = await this.getColumnDetail({
      name: this.left,
      taskId: this.selectNode.parentId?.split(',')[0],
      table: this.selectNode.data.input[0].tableName,
    })
  }

  public async onRightColumnChange() {
    this.rightDetail = await this.getColumnDetail({
      name: this.right,
      taskId: this.selectNode.parentId?.split(',')[1],
      table: this.selectNode.data.input[1].tableName,
    })
  }

  /**
   * 获取列名对应的详细内容
   */
  public async getColumnDetail(data?: any) {
    const { name, table } = data
    const response: any = await apiGetTableData({
      data: {
        curPage: 1,
        pageSize: 10,
        name: '_record_id_',
        taskId: data.taskId ? data.taskId : this.selectNode.id,
        filter: [],
        table,
      },
    })
    if (response.status === 200 && response.data.success) {
      const { result } = response.data
      // const columnIndex = result.head.findIndex((item: any) => item.name === name)
      return result.data.map((item: any) => item[name])
    }
    return []
  }
}
</script>

<style lang="less" scoped>
@import '@/components/studio/data/set-params/setParams';

/*  */
.prompt-message {
  height: 32px;
  line-height: 32px;
  margin-bottom: 6px;
  width: 100%;
}
/* 模式 */
.mode-radio-group {
  margin-bottom: 12px;
}

/* 左右表名 tip */
.table-name-tips {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  width: 100%;

  .table-name {
    display: flex;

    .name-width {
      width: 120px;

      .name-text {
        color: #1e49f8;
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100%;
      }
    }
  }

  .table-name-left {
    width: 66%;
  }

  .table-name-right {
    padding-left: 8px;
    width: 34%;
  }
}

/* 关联关系 */
.incidence-all {
  display: flex;
  justify-content: space-between;

  .incidence-all-left {
    width: 66%;
  }

  .incidence-all-right {
    padding-left: 8px;
    width: 34%;
  }

  /* 左右选择框 */
  .incidence-left-right {
    display: flex;
    flex-direction: column;

    .incidence-item-column {
      align-items: center;
      display: flex;
      margin-bottom: 6px;
      width: 100%;
      /* 列选择 */
      .incidence-column-select {
        height: 23px;
        width: 150px;
      }
      /* 条件选择 */
      .operator-select {
        height: 24px;
        margin-left: 8px;
        width: 150px;
      }
    }
  }
}

.column-detail {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;

  .left,
  .right {
    width: 120px;
  }

  .left {
    margin-right: 10px;
  }

  .item {
    border: 1px solid #e9e9e9;
    line-height: 24px;
    overflow: hidden;
    padding: 0 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.set-params-warning {
  color: #888;
  font-size: 12px;
  font-style: italic;
  padding: 15px 10px 0;
  text-align: center;
}
</style>
